<template>
 <el-dialog
    v-model="state.forgetPasswordDialogVisible"
    title="忘记密码"
    width="500"
  >
    <el-form label-position="top" class="login-form" :model="forgetData" label-width="auto" style="max-width: 400px" :rules="rules">
        <el-form-item label="账号" prop="account">
            <el-input v-model="forgetData.account" placeholder="请输入账号"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="forgetData.email" placeholder="请输入邮箱"/>
        </el-form-item>
    </el-form>
    <template #footer>
        <div class="dialog-footer">
            <el-button @click="state.forgetPasswordDialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="openChange">
            下一步
            </el-button>
        </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="state.changePasswordDialogVisible"
    title="修改密码"
    width="500"
  >
    <el-form label-position="top" class="login-form" :model="forgetData" label-width="auto" style="max-width: 400px" :rules="rules">
        <el-form-item label="输入新密码" prop="password">
            <el-input v-model="forgetData.password" placeholder="请输入新密码"/>
        </el-form-item>
        <el-form-item label="再次输入新密码" prop="newPassword">
            <el-input v-model="forgetData.newPassword" placeholder="请再次输入新密码"/>
        </el-form-item>
    </el-form>
    <template #footer>
        <div class="dialog-footer">
            <el-button @click="state.changePasswordDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="openChangePassword">
            重置
            </el-button>
        </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { verify, restPassword } from "@/api/login";
import { ElMessage } from "element-plus";
interface forgetDataType {
    account: string,
    email: string
}

const forgetData = reactive({
id: "",
  account: "",
  email: "",
  password: "",
  newPassword: "",
})

const rules = reactive({
    account: [
        {required: true, message: "请输入账号", trigger: "blur"},
    ],
    email: [
        {required: true, message: "请输入邮箱", trigger: "blur"},
    ],
    password: [
        {required: true, message: "请输入新密码", trigger: "blur"},
    ],
    newPassword: [
        {required: true, message: "请再次输入新密码", trigger: "blur"},
    ],
})

const state = reactive({
    forgetPasswordDialogVisible: false,
    changePasswordDialogVisible: false,
})
const open = () => {
    state.forgetPasswordDialogVisible = true
}
defineExpose({
    open
})

const openChange = async() => {
    const res = await verify(forgetData);
    console.log(res,'9999999')
    if (res.data.code === 0) {
        ElMessage({
            message: "验证成功",
            type: "success"
        })
        forgetData.id = res.data.data.id
        state.forgetPasswordDialogVisible = false
        state.changePasswordDialogVisible = true
    } else {
        ElMessage({
            message: "验证失败",
            type: "warning"
        })
    }
   
}

const openChangePassword = async() => {
    const res = await restPassword(forgetData);
    if (res.data.code === 0) {
        ElMessage({
            message: res.data.msg,
            type: "success"
        })
        state.changePasswordDialogVisible = false
    } else {
        ElMessage({
            message: "修改失败",
            type: "warning"
        })
    }
}
</script>
<style lang="scss" scoped>

</style>